<template>
  <div class="entry">
    <el-table
        :data="itam"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#f8f9fa', color: '#666' }"
        @row-click="handleRowClick"
    >
      <el-table-column prop="name" label="姓名" align="center"></el-table-column>
      <el-table-column prop="sex" label="性别" align="center"></el-table-column>
      <el-table-column prop="age" label="年龄" align="center"></el-table-column>
      <el-table-column prop="degree" label="学历" align="center"></el-table-column>
      <el-table-column prop="department" label="入职部门" align="center"></el-table-column>
      <el-table-column prop="post" label="入职岗位" align="center"></el-table-column>
      <el-table-column prop="handled" label="面试官" align="center"></el-table-column>
    </el-table>

    <!-- 员工详情弹窗（带操作按钮） -->
    <el-dialog
        title="详细信息"
        v-model="dialogVisible"
        width="600px"
        :before-close="handleClose"
        :lock-scroll="false"
    >
      <el-descriptions column="1" border>
        <el-descriptions-item label="姓名" align="left">{{ Employee.name }}</el-descriptions-item>
        <el-descriptions-item label="性别" align="left">{{ Employee.sex }}</el-descriptions-item>
        <el-descriptions-item label="年龄" align="left">{{ Employee.age }}</el-descriptions-item>
        <el-descriptions-item label="学历" align="left">{{ Employee.degree }}</el-descriptions-item>
        <el-descriptions-item label="入职部门" align="left">{{ Employee.department }}</el-descriptions-item>
        <el-descriptions-item label="入职岗位" align="left">{{ Employee.post }}</el-descriptions-item>
        <el-descriptions-item label="面试官" align="left">{{ Employee.handled }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="danger" @click="handleReject">拒绝入职</el-button>
        <el-button type="success" @click="handleApprove">同意入职</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { ElMessage } from 'element-plus';

// 员工数据
const itam = reactive([
  {
    name: '李四',
    sex: '男',
    age: 21,
    degree: '本科',
    department: '研发部',
    post: '前端工程师',
    handled: '张放'
  },
  {
    name: '张三',
    sex: '女',
    age: 25,
    degree: '硕士',
    department: '测试部',
    post: '测试工程师',
    handled: '王华'
  }
]);


const dialogVisible = ref(false);
const Employee = ref({});

const handleRowClick = (row) => {
  Employee.value = { ...row };
  dialogVisible.value = true;
};

const handleClose = () => {
  dialogVisible.value = false;
};

const handleApprove = () => {
  ElMessage.success(`已同意 ${Employee.value.name} 入职`);
  dialogVisible.value = false;


  const index = itam.findIndex(item => item.name === Employee.value.name);
  if (index !== -1) {
    itam[index].status = '已同意';
  }
};


const handleReject = () => {
  ElMessage.error(`已拒绝 ${Employee.value.name} 入职`);
  dialogVisible.value = false;

  const index = itam.findIndex(item => item.name === Employee.value.name);
  if (index !== -1) {
    itam[index].status = '已拒绝';
  }
};
</script>

<style scoped>

.entry {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.el-table__row:hover > td {
  background-color: #f0f7ff !important;
  cursor: pointer;
}

:deep(.el-dialog__footer) {
  margin-top: 20px;
}

:deep(.el-dialog__footer .el-button) {
  margin-left: 8px;
}
.el-dialog {
  transition: all 0.2s ease;
}
</style>
